<template>
  <el-dialog v-loading="loading" :close-on-click-modal="false" :title="title" width="760px" :visible.sync="visible" @cancel="close">
    <el-form ref="form" label-width="100px" :rules="rules" size="medium" :model="form">
      <el-form-item prop="icon" label="功能图标">
        <div style="display: flex;align-items: flex-end">
          <el-upload
            class="fl app-uploader-img-plus"
            :action="actionUrl"
            :show-file-list="false"
            :headers="uploadHeaders"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="icon" :src="icon" class="avatar" alt="icon">
            <i v-else class="el-icon-plus app-uploader-img-plus-icon" />
          </el-upload>

          <div style="line-height: normal;margin-left: 20px">
            <div>图片要求：</div>
            <div>1.上传的图片限制文件大小限制1MB，仅支持JPG、PNG格式</div>
            <div>2.建议尺寸： 100*100像素</div>
          </div>
        </div>
      </el-form-item>

      <el-form-item prop="name" label="功能名称"><el-input v-model="form.name" placeholder="请填入内容" /></el-form-item>

      <el-form-item prop="code" label="功能编码"><el-input v-model="form.code" placeholder="请填入内容" /></el-form-item>

      <el-form-item prop="description" label="功能说明"><el-input v-model="form.description" placeholder="请填入内容" /></el-form-item>

      <el-form-item label="关联功能集" prop="sysFeatureIdList">
        <el-select v-model="form.sysFeatureIdList" style="width: 620px" filterable multiple placeholder="请选择">
          <el-option v-for="item in featureList" :key="item.code" :label="item.name + ' - ' + item.code" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="需要全部权限" prop="needAllPerms"><el-checkbox v-model="form.needAllPerms" /></el-form-item>

      <el-form-item prop="pagePath" label="小程序路径"><el-input v-model="form.pagePath" placeholder="请填入内容" /></el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button class="canceBtn" @click="close">放弃</el-button>
      <el-button type="primary" @click="handleSave">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import { imgUploadUrl } from '@/api/upload'
import { queryFeatureList } from '@/api/feature'
import { addEntrance, updateEntrance } from '@/api/wxaEntrance'

export default {
  name: 'FeatureEntranceDialog',
  props: {
    scope: {
      type: Number,
      require: true
    }
  },
  data() {
    return {
      loading: false,
      visible: false,
      title: '',
      mode: '',
      reject: null,
      resolve: null,
      baseUrl: null,
      uploadHeaders: {},
      actionUrl: imgUploadUrl,
      icon: '',
      featureList: [],
      form: {
        icon: null,
        name: null,
        featureId: null,
        sysFeatureIdList: null,
        code: null,
        description: null,
        remark: null,
        needAllPerms: null,
        pagePath: null
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入功能名称',
            trigger: 'blur'
          }
        ],
        icon: [
          {
            required: true,
            message: '请上传图标'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入功能编码',
            trigger: 'blur'
          }
        ],
        pagePath: [
          {
            required: true,
            message: '请输入小程序路径',
            trigger: 'blur'
          }
        ],
        sysFeatureId: [
          {
            required: true,
            message: '请选择关联功能集',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['resBaseUrl'])
  },
  methods: {
    defaultForm() {
      return {
        icon: null,
        name: null,
        description: null,
        remark: null,
        code: null
      }
    },

    handleAvatarSuccess(res, file) {
      if (res.code === 0) {
        this.icon = res.data.baseUrl + res.data.path
        this.form.icon = res.data.path
        this.$refs.form.clearValidate(['icon'])
      } else {
        this.$message.error(res.msg)
      }
    },
    // 上传前处理
    beforeAvatarUpload(file) {
      return this.$beforeUploadImg(file, this, 1000, 1000, 1)
    },

    fetchFeatureList() {
      queryFeatureList(2, { pageSize: 1000, pageNum: 1 }).then(res => {
        this.featureList = res.data.list
      })
    },
    add() {
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
        this.visible = true
        this.mode = 'add'
        this.title = '新增小程序功能入口'
        this.form = this.defaultForm()
        this.icon = null
        this.fetchFeatureList()
      })
    },
    edit(data) {
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
        this.visible = true
        this.mode = 'edit'
        this.title = '编辑小程序功能'
        this.loading = false
        this.form = JSON.parse(JSON.stringify(data))
        this.icon = this.resBaseUrl + this.form.icon
        this.fetchFeatureList()
      })
    },
    close() {
      this.visible = false
      this.resolve = null
      this.reject = null
      this.$refs.form.resetFields()
    },
    handleSave() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          const data = JSON.parse(JSON.stringify(this.form))
          data.type = 0
          if (this.mode === 'add') {
            addEntrance(data)
              .then(res => {
                this.loading = false
                this.resolve && this.resolve()
                this.close()
              })
              .catch(res => {
                this.loading = false
              })
          } else {
            updateEntrance(data)
              .then(res => {
                this.loading = false
                this.resolve && this.resolve()
                this.close()
              })
              .catch(res => {
                this.loading = false
              })
          }
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-dialog__header .el-dialog__title {
	color: $btnBgc;
}
::v-deep .dialog-footer {
	.canceBtn:hover {
		background-color: $btnBgc;
		border-color: white;
		color: white;
	}
	.el-button--primary {
		background-color: $btnBgc;
		border: none;
	}
	.el-button--primary:hover {
		opacity: 0.5;
	}
}

.el-form-item {
	margin-bottom: 15px;
	::v-deep .el-input--medium .el-input__inner:focus {
		border-color: $btnBgc;
	}
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
	border-color: $btnBgc;
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
	color: $btnBgc;
}

/* 上传 */
.app-uploader-img-plus {
	width: 100px;
	height: 100px;
	border: 1px dotted #ddd;
}

.app-uploader-img-plus-icon {
	font-size: 28px;
	color: #8c939d;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}

.avatar {
	width: 100px;
	height: 100px;
	display: block;
}

.upload-tips {
	margin: 20px 0 0 20px;
	li {
		margin-top: 10px;
		font-size: 14px;
		line-height: 16px;
		color: #999;
	}
}
</style>
